<template>
  <div class="container">
    <el-row class="main"
            type="flex"
            justify="space-between">
      <!-- logo -->
      <div class="logo">
        <nuxt-link to="/"><img src="http://157.122.54.189:9093/images/logo.jpg"
               alt=""></nuxt-link>
      </div>
      <!-- 导航 -->
      <div class="navs">
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/post">旅游攻略</nuxt-link>
        <nuxt-link to="/hotel">酒店</nuxt-link>
        <nuxt-link to="/air">国内机票</nuxt-link>
      </div>
      <!-- 注册 -->
      <div>
        <div v-if="!$store.state.user.userInfo.token"
             class="login" @click="handleLogin" >登陆/注册</div>
        <div v-else class="userInfo">
          <el-dropdown>
  <span class="el-dropdown-link">
    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3488421168,2929985473&fm=26&gp=0.jpg" alt="">
   {{$store.state.user.userInfo.user.username}}
   <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>个人中心</el-dropdown-item>
    <el-dropdown-item @click.native="handleLoginOut">退出</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
   data(){
     return{

     }
   },
   mounted (){
    //  console.log(this.$store.state.user.userInfo)
   },
   methods :{
     handleLoginOut(){
       this.$store.commit('user/clearUserInfo');
       this.$message.success('退出成功');
     },
    //  登录
    handleLogin (){
      this.$router.push('/user/login');
    }
   }
}
</script>

<style lang="less" scopde >
.container {
  height: 60px;
  box-shadow: 0 3px 3px #ccc;
  z-index: 999;
  margin-bottom: 5px;
  background: #fff;
}
.main {
  width: 1000px;
  margin: 0 auto;
  line-height: 60px;
}
.logo {
  img {
    display: block;
    width: 165px;
    height: 42px;
    margin-top: 9px;
  }
}
.navs {
  flex: 1;
  font-size: 18px;
  a {
    display: inline-block;
    padding: 0 20px;
    &:hover {
      color: #409eff;
      border-bottom: 5px solid #409eff;
    }
  }
  .nuxt-link-exact-active {
    color: #fff;
    background: #409eff;
    &:hover {
      color: #fff;
    }
  }
}
.el-dropdown-link{
  img{
    display: inline-block;
    width: 50px;
    height: 50px;
   vertical-align: middle;
   border-radius: 50%;
  }
}

</style>